<!-- 溯源记录-繁殖-步骤条 -->
<template>
<view class="setp">
	<uv-steps current="0" active-color="#12cc77" inactive-color="#e6e6e6" direction="column">
	  <!-- 动态渲染步骤条 -->
	  <uv-steps-item 
	  v-for="(step, index) in stepsData" 
	  :key="index" 
	  :title="step.title" 
	  class="step-item">
		
	    <template v-slot:desc>
	      <view class="box">
	        <!-- 动态渲染每个步骤的内容 -->
	        <view v-for="(value, key) in step" :key="key">
	          <p v-if="key.startsWith('title') && key !== 'title'" class="step-content">
	            <view class="align-content">{{ step[key] }}</view>：
	            <span :class="{ 'imei-text': step[`content${key.replace('title', '')}`].includes('IMEI') }">
	              {{ step[`content${key.replace('title', '')}`] }}
	            </span>
	          </p>
	        </view>
			<image v-if="step.img" :src="step.img" class="custom-image"></image>
	      </view>
	    </template>
	    <template v-slot:icon>
	      <image src="@/static/cow/node.png" class="custom-icon"></image>
	    </template>
	  </uv-steps-item>
	  <!-- 添加一个不可见的步骤项以保留最后的连接线 -->
	  <uv-steps-item :title="' '" :desc="' '">
	    <template v-slot:icon>
	      <image src="@/static/cow/node.png" class="custom-icon" style="visibility: hidden;"></image>
	    </template>
	  </uv-steps-item>
	</uv-steps>
</view>

</template>

<script setup>
// 接收父组件传递的数据
const props = defineProps({
  stepsData: {
    type: Array,
    required: true
  }
})
</script>

<style>
	.setp{
	margin-left: 45rpx;	
	}
/* 自定义图片图标的样式 */
.custom-icon {
  width: 30rpx; /* 设置图片宽度 */
  height: 30rpx; /* 设置图片高度 */
  border-radius: 50%; /* 设置圆形图片 */
  object-fit: cover; /* 确保图片填满容器 */
}

/* 设置IMEI文本颜色为绿色 */
.imei-text {
  color: #12cc77; /* 绿色 */
}

/* 设置步骤内容的样式 */
.step-content {
  font-size: 30rpx; /* 设置字体大小 */
  color: #333333; /* 设置字体颜色 */
  margin-bottom: 10rpx; /* 设置底部间距 */
  display: flex;
  align-items: center;
}

/* 设置两端对齐的样式 */
.align-content {
display: flex;
justify-content: space-between;
}

/* 设置步骤项的样式 */
.step-item {
  padding: 20rpx 0; /* 设置上下内边距 */
}

/* 隐藏最后一个步骤项的内容 */
uv-steps[direction="column"] uv-steps-item:last-child .uv-steps-item__title,
uv-steps[direction="column"] uv-steps-item:last-child .uv-steps-item__desc {
  display: none;
}

.box {
  margin-top: 10rpx;
}

.custom-image{
	height: 980rpx;
}

</style>